<template>
	<view class="record-content">
		<view class="record-item" @click="goDetail(item.id)" v-for="item in recordList" :key="item.id">

			<view class="item-title done">
				<view class="left-border"></view>
				<view class="left">{{ getStatus(item) }}</view>
				<view class="right">申请日期：{{ item["申请时间"] | formatTime }}</view>
			</view>
			<view class="item-content">
				<view class="content-top un-evaluate">
					<view class="overflow">申请人 ：{{ item['申请人员'] }}</view>
					<!-- <view class="have-evaluate">已评价</view> -->
				</view>
				<view class="content-center overflow">申请单位 ：{{ item["申请单位"] }}</view>
				<view class="content-bottom overflow">申请原因：{{item['申请原因']}}</view>
				<view class="arrow"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			recordList: {
				type: Array,
				default: () => [],
			},
		},
		data() {
			return {
				applyStatus: {
					1: '已',
					2: '未'
				},
				statusDesc: {
					1: '入库',
					2: '退还',
					3: '领用'
				}
			};
		},
		methods: {
			getStatus(item) {
				return this.applyStatus[item['申请后状态']] + this.statusDesc[item['申请类型']]
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/materialSystem/applyDetail/applyDetail?id=" + id
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.record-content {
		.record-item {
			.done {
				display: flex;
				justify-content: space-between;
				padding-right: 10rpx;
			}

			width: 710rpx;
			height: 282rpx;
			background-color: #fff;
			box-shadow: 0px 6rpx 20rpx 0px rgba(211, 211, 211, 0.5);
			// box-shadow: 0px 1rpx 20rpx 1rpx #eeeeee;
			border-radius: 8rpx;
			margin: 15rpx 0;
			margin-left: 20rpx;

			.item-title {
				width: 100%;
				height: 71rpx;
				display: flex;
				padding-right: 30rpx;
				align-items: center;
				border-bottom: 2rpx solid #eee;
				position: relative;

				// padding-top: 10rpx;
				.left-border {
					width: 6rpx;
					height: 30rpx;
					background-color: #1064e9;
					position: absolute;
					left: 0;
					top: 20rpx;
				}

				.left {
					padding-left: 30rpx;
					color: #333;
					font-weight: bold;
					margin-right: 112rpx;
				}

				.center {
					display: flex;
					color: #fd9938;
					margin-right: 120rpx;

					.center-img {
						width: 29rpx;
						height: 32rpx;
						margin-right: 6rpx;
						margin-top: 6rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.right {
					// color: #FF8686;
					// width: 82rpx;
					// height: 36rpx;
					// font-size: 22rpx;
					// border: 2rpx solid #FF8686;
					// text-align: center;
				}

				.compete {
					color: #83d065;
					width: 82rpx;
					height: 36rpx;
					font-size: 22rpx;
					border: 2rpx solid #83d065;
					text-align: center;
				}
			}

			.item-content {
				color: #666;
				padding: 30rpx;
				font-size: 28rpx;
				position: relative;

				.un-evaluate {
					display: flex;

					.evaluate-icon {
						margin-left: 62rpx;
						width: 96rpx;
						height: 48rpx;
						background-color: #ffa85b;
						font-size: 26rpx;
						color: #fff;
						text-align: center;
						line-height: 48rpx;
					}

					.have-evaluate {
						width: 96rpx;
						height: 48rpx;
						text-align: center;
						align-items: center;
						color: #ccc;
						font-size: 26rpx;
						margin-left: 62rpx;
						border: 2rpx solid #bfbfbf;
						border-radius: 2rpx;
					}
				}

				.content-top {
					margin-bottom: 16rpx;
				}

				.content-center {
					margin-bottom: 10rpx;
					// width: 22em;
					// overflow: hidden;
					// white-space: nowrap;
					// text-overflow: ellipsis;
				}

				.overflow {
					width: 21em;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.arrow {
					width: 24rpx;
					height: 24rpx;
					border-top: 2rpx solid #666;
					border-right: 2rpx solid #666;
					transform: rotate(45deg);
					position: absolute;
					top: 80rpx;
					right: 40rpx;
				}
			}
		}
	}
</style>
